/* eslint-disable import/no-extraneous-dependencies */
import { storiesOf, addDecorator } from "@storybook/vue";
import Pagination from "../components/Pagination.vue";
import { withCssResources } from "@storybook/addon-cssresources";
import { withOptions } from "@storybook/addon-options";
import { checkA11y } from "@storybook/addon-a11y";
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
//import paginationMd from './pagination.md';
addDecorator(
  withCssResources({
    cssresources: [
      {
        name: `bluetheme`,
        code: `<style>body { background-color: lightblue; }</style>`,
        picked: false
      }
    ]
  })
);

storiesOf("Pagination 组件", module)
  .addDecorator(checkA11y)
  .add(
    "A standard pagination",
    () => ({
      components: { Pagination },
      template: '<pagination :current-page="1" :total="90" :page-size="10" />'
    }),
    { notes: "A very simple component" }
  )
  .addDecorator(withKnobs)
  .add("as dynamic variables", () => {
    const name = text("Name", "Arunoda Susiripala");
    const age = number("Age", 89);

    const content = `I am ${name} and I'm ${age} years old.`;
    return `<div>${content}</div>`;
  });
